<template>
    <div class="footer">
        <!-- 显示未完成任务数量 -->
        <div class="todo-count">
            共 <strong>{{ lastLength }}</strong> 条未完成任务
        </div>
        <!-- 状态筛选按钮 -->
        <van-space>
            <van-button
                v-for="(option, index) in statusOptions"
                :key="index"
                @click="updateStatus(option.value)"
                :class="{ selected: status === option.value }"
            >
                {{ option.label }}
            </van-button>
        </van-space>
    </div>
</template>

<script>
export default {
    props: {
        // 未完成任务数量
        lastLength: {
            type: Number,
            default: 0
        },
        // 当前筛选状态
        status: {
            type: String,
            default: 'all'
        }
    },
    data() {
        return {
            // 状态筛选选项
            statusOptions: [
                { label: '全部', value: 'all' },
                { label: '待办', value: 'active' },
                { label: '已完成', value: 'completed' }
            ]
        };
    },
    methods: {
        // 触发更新状态的事件
        updateStatus(status) {
            this.$emit('updateStatus', status);
        }
    }
};
</script>

<style scoped>
.footer {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
}

.todo-count {
    flex: 1;
    text-align: left;
}

.van-button {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
}

.selected {
    background-color: #e6e6e6;
}
</style>    